<template>
  <AudioButton @customClick="handleNextClick">
    <svg
      width="100%"
      height="100%"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 300 300"
    >
      <defs>
        <clipPath id="clip-rect">
          <rect x="0" y="0" width="140" height="300" />
        </clipPath>
        <g id="play">
          <polyline
            ref="poly1"
            points="140 88.3333 90,60 90,230 140,201.6666"
            fill="transparent"
            stroke="white"
            stroke-width="8"
          />
          <polyline
            ref="poly2"
            points="190,173.33333333 240,145 240,145 190,116.6666"
            fill="transparent"
            stroke="white"
            stroke-width="8"
          />
          <line
            ref="line1"
            x1="140"
            y1="88.3333"
            x2="190"
            y2="116.6666"
            stroke="white"
            stroke-width="8"
          />
          <line
            ref="line2"
            x1="140"
            y1="201.6666"
            x2="190"
            y2="173.3333"
            stroke="white"
            stroke-width="8"
          />
        </g>
      </defs>
      <use xlink:href="#play" transform="translate(-20)" clip-path="url(#clip-rect)" />
      <use xlink:href="#play" transform="translate(30)" />
    </svg>
  </AudioButton>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import AudioButton from "@/components/AudioButton.vue";
import * as d3 from "d3";

@Component({
  components: {
    AudioButton
  }
})
export default class PlayAudioButton extends Vue {
  private mounted() {}
  private handleNextClick() {}
}
</script>

<style lang="scss" scoped>
</style>
